<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item>
          <el-select
            v-model="nation"
            placeholder="请选择国家"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生成数量">
          <el-input v-model="count" placeholder="生成通讯录份数" />
        </el-form-item>
        <el-form-item label="每份数量">
          <el-input v-model="dimension" placeholder="生成每份数量" />
        </el-form-item>
        <el-form-item label="是否生成名字">
          <el-switch v-model="isName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">生成</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        show-overflow-tooltip
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="folderName" label="通讯录国家" />
        <el-table-column prop="fileCount" label="通讯录数量" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              @click.prevent="deleteRow(scope.row.folderName)"
            >
              清空
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { getList, generate ,deleteFile} from "../api/GenerateNumber";
import { ElMessage } from 'element-plus'
const count = ref("");
const nation = ref("");
const dimension = ref("");
const isName=ref(false)
const tableData = ref([]);
const options = ref([
  {
    label: '澳大利亚',
    value: '澳大利亚'
  },
  {
    label: '巴西',
    value: '巴西'
  },
  {
    label: '德国',
    value: '德国'
  },
  {
    label: '法国',
    value: '法国'
  },
  {
    label: '荷兰',
    value: '荷兰'
  },
  {
    label: '加拿大',
    value: '加拿大'
  },
  {
    label: '美国',
    value: '美国'
  },
  {
    label: '瑞典',
    value: '瑞典'
  },
  {
    label: '瑞士',
    value: '瑞士'
  },
  {
    label: '新西兰',
    value: '新西兰'
  },
  {
    label: '意大利',
    value: '意大利'
  },
  {
    label: '英国',
    value: '英国'
  }
]);

const onSubmit = async () => {
  if (!nation.value || nation.value === "" || count.value < 1 || dimension.value<1) {
    return;
  }
  const response= await generate(nation.value,count.value, dimension.value,isName.value)
  ElMessage({
    message: response.message,
    type: 'success',
  })
  requestList()
};
const deleteRow =async (filename) => {
const response=await deleteFile(filename)
ElMessage({
    message: response.message,
    type: 'success',
  })
  requestList()
};
const requestList = async () => {
  try {
    // 发起请求并等待响应
    const response = await getList();
    // 确保响应存在并且数据有效
    if (response && response.data) {
      // 映射数据并添加 ID
      const mappedData = response.data.map((item, index) => ({
        ...item,
        id: index + 1, // 使用更明确的计数器
      }));
      // 更新表格数据
      tableData.value = mappedData;
   
    } else {
      // 处理响应为空的情况
      console.warn("Received empty response data");
      tableData.value = [];
      options.value = []; // 确保 options 也被清空
    }
  } catch (error) {
    // 处理请求失败的情况
    console.error("Failed to fetch data:", error);
    tableData.value = []; // 或者可以考虑其他的错误处理措施，比如显示错误消息
    options.value = []; // 确保 options 也被清空
  }
};

onMounted(() => {
  requestList();
});
</script>
  
  <style lang="scss" scoped></style>
  